<!-- 申请支付 -->
<template>
  <div class="app-container">
    <el-alert style="margin-bottom: 15px;" type="warning" :title="msg"></el-alert>
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
      <el-form-item label="订单号" prop="shippingNoteNumber">
        <el-input
          v-model="queryParams.shippingNoteNumber"
          placeholder="请输入订单号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="司机姓名" prop="driverName">
        <el-input
          v-model="queryParams.driverName"
          placeholder="请输入司机姓名"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="司机手机号" prop="driverPhone">
        <el-input
          v-model="queryParams.driverPhone"
          placeholder="请输入司机手机号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="车牌号" prop="vehicleNumber">
        <el-input
          v-model="queryParams.vehicleNumber"
          placeholder="请输入车牌号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-bank-card"
          size="small"
          :disabled="single"
          @click="apply"
        >申请支付</el-button>
      </el-col>
      <el-col :span="4">
        <el-button type="info" size="small" plain disabled>
          已选 <label style="color: red;">{{ ids.length }}</label> 个订单，&nbsp;总金额：<label style="color: red;">￥{{ totalMoney }}</label>
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="订单号" align="center" prop="shippingNoteNumber">
        <span slot="header">
          订单号
          <el-tooltip effect="dark" placement="top" content="点击订单号可查看订单详情">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </span>
        <template slot-scope="scope">
          <span style="color: #1890ff; cursor: pointer;" @click="handleView(scope.row)">{{ scope.row.shippingNoteNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center" prop="status" :formatter="statusFormat" />
      <el-table-column label="支付状态" align="center" prop="isPay" :formatter="isPayFormat" />
      <el-table-column label="运费金额(元)" align="center" prop="totalMonetaryAmount" />
      <el-table-column label="托运人" align="center" prop="consignor" />
      <el-table-column label="装货地址" align="center" prop="placeOfLoading" show-overflow-tooltip />
      <el-table-column label="收货方" align="center" prop="consignee" />
      <el-table-column label="收货地址" align="center" prop="goodsReceiptPlace" show-overflow-tooltip />
      <el-table-column label="司机" align="center" prop="driverName" />
      <el-table-column label="司机电话" align="center" prop="driverPhone" />
      <el-table-column label="车辆" align="center" prop="vehicleNumber" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.current"
      :limit.sync="queryParams.size"
      @pagination="getList"
    />

  </div>
</template>

<script>
import { paymentListOrder } from "@/api/tws/order";
import { addPayment } from "@/api/tws/payment";
import { accAdd } from "@/utils/func";

export default {
  name: "paymentApply",
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      msg: '仅支持单个订单的支付申请',
      // 总条数
      total: 0,
      // 订单表格数据
      orderList: [],
      totalMoney: 0.00,
      isApply: false, // 是否可申请
      // 订单状态字典数据
      statusOptions: [],
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        originalDocumentNumber: null,
        shippingNoteNumber: null,
        driverId: null,
        driverName: null,
        driverPhone: null,
        vehicleNumber: null,
        isReceipt: null,
        status: null,
        isPay: null
      }
    };
  },
  created() {
    this.getDict();
    this.getList();
  },
  methods: {
    getDict() {
      // 订单状态字典
      this.getDicts("order_status").then(response => {
        this.statusOptions = response.data;
      });
    },
    /** 查询待支付订单列表 */
    getList() {
      this.loading = true;
      paymentListOrder(this.queryParams).then(response => {
        this.orderList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 订单状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 是否支付
    isPayFormat(row, column) {
      return row.isPay == '1' ? '已支付' : '未支付';
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.current = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection
      this.single = selection.length!==1
      this.multiple = !selection.length
      this.func(selection);
      this.isApplyC(selection);
    },
    // 计算总金额
    func(selection) {
      let t = 0.00;
      selection.forEach(o => {
        t = accAdd(t, o.totalMonetaryAmount);
      });
      this.totalMoney = t;
    },
    // 判断是否可申请支付
    isApplyC(selection) {
      // 同一个司机
      let driverIds = selection.map(item => item.driverId)
      let ds = new Set(driverIds);
      // 同一辆车
      let vehicleIds = selection.map(item => item.vehicleId)
      let vs = new Set(vehicleIds);
      this.isApply = ds.size == 1 && vs.size == 1;
    },
    // 查看
    handleView(row) {
      this.$router.push({ path: '/order/orderDetail', query: { orderId: row.id }, replace: true });
    },
    // 申请
    apply() {
      if(this.isApply) {
        let that = this;
        this.$prompt('是否确认申请支付? 您可以输入备注', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          let order = that.ids[0];
          let paymentOrders = [];
          that.ids.forEach(o => {
            let or = {
              orderId: o.id
            }
            paymentOrders.push(or);
          })
          let obj = {
            carrier: order.actualCarrierName,
            actualCarrierId: order.actualCarrierId,
            vehicleNumber: order.vehicleNumber,
            vehiclePlateColorCode: order.vehiclePlateColorCode,
            driverId: order.driverId,
            driverName: order.driverName,
            companyName: order.companyName,
            orderTotal: that.ids.length,
            monetaryAmount: that.totalMoney,
            remark: value,
            paymentOrders: paymentOrders
          }
          return addPayment(obj);
        }).then(() => {
          that.$modal.msgSuccess("已申请");
          that.getList();
        }).catch(err => {
          that.getList();
        })
      } else {
        this.$modal.msgError(this.msg);
      }
    }
  }
};
</script>
